/**
* The default Scribble theme.
*
* @package Scribble
* @subpackage AdminTheme
*/

/* ------------------------------------- Global structural and inline styling */
html {
}

body {
	background-color: #FFFFFF;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	text-align: center;
}

a {
	color: #27669F;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Use on internal # hyperlinks */
a.fragment {
	background: url('../../images/a-fragment.png') no-repeat right center;
	padding-right: 16px;
}

/* Use on help links */
a.help {
	background: url('../../images/a-help.png') no-repeat right center;
	padding-right: 16px;
}

em {
	font-style: italic;
}

input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
	padding: 3px;
}

p {
	line-height: 1.5em;
	margin: 1em 0px;
}

p.information {
	background: #FFFFCC;
	border: #660000 1px dotted;
	color: #009900;
	padding: 0.5em;
}

p.warning {
	background: #FFFFCC;
	border: #660000 1px dotted;
	color: #660000;
	padding: 0.5em;
}

/* Use this class to clear after elements that contain floated children */
.float-wrapper {
	display: inline-block;
}
.float-wrapper {
	display: block;
}
.float-wrapper:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* Use this class to display an element inline-block */
.inline-block {
	display: inline;
	zoom: 1;
}
.inline-block /**/ {
	display: inline-block;
}

/* Use when indicating communication with server */
select.server-busy {
	background: #f0f0f0;
	border-color: #f00;
	color: #999;
}

input.server-busy {
	background: url('../../images/server-busy.gif') no-repeat right center;
}

div.server-busy {
	background: url('../../images/server-busy.gif') no-repeat center center;
}


/* -------------------------------------------------------------- Help dialog */
#scribble-help-dialog {
	display: none;
}


/* --------------------------------------------------------------------- Body */
#body {
}


/* ------------------------------------------------------------------- Header */
#wrap-head {
}

#header {
	color: #666666;
	margin: 0px auto;
	width: 1000px;
}

	h1#app-name {
		float: left;
		font-size: 24px;
		font-weight: normal;
		margin: 0px;
		padding: 10px;
	}

	#nav-header {
		float: right;
		padding: 15px 10px 5px 0;
		text-align: right;
	}
	
		#nav-header a {
			text-decoration: none;
		}
	
		#nav-header a:hover {
			text-decoration: underline;
		}


/* --------------------------------------------------------- Navigation: Main */
#wrap-nav-main {
}

#nav-main {
	border-bottom: #2083bd 2px solid;
	margin: 0px auto;
	text-align: left;
	width: 1000px;
}

	#nav-main ul {
		margin: 0px;
		padding-left: 10px;
		z-index: 1;
	}

		#nav-main ul li {
			display: inline;
			margin: 0px 2px;
			position: relative;
			zoom: 1;
		}

		#nav-main[id] ul > /**/ li {
			display: inline-block;
		}

			#nav-main ul li a {
				background: #2083bd;
				color: #FFFFFF;
				display: block;
				font-weight: bold;
				padding: 10px;
				text-decoration: none;
				white-space: nowrap;
			}
			#nav-main ul li a:hover {
				text-decoration: underline;
			}

			#nav-main ul li a.active, #nav-main ul li a.open {
				background: #124b6d;
				text-shadow: #000000 1px 1px 1px;
			}

/* Submenus */
#nav-main ul li ul {
	display: none;
	left: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
}

#nav-main ul li:hover ul {
	display: block;
}

	#nav-main ul li ul li {
		margin: 0px;
		width: 100%;
	}

/* Submenus of active menu (permanently visible) */
ul.submenu {
	background: #124b6d;
	z-index: 0;
}

	#nav-main ul.submenu li a {
		background: #124b6d;
	}

	#nav-main ul.submenu li a.active {
		background: #000;
		text-decoration: underline;
	}


/* ----------------------------------------------------------- Main workspace */
#wrap-workspace {
}

#workspace {
	border-bottom: #CCCCCC 1px solid;
	border-left: #CCCCCC 1px solid;
	border-right: #CCCCCC 1px solid;
	margin: 0px auto;
	overflow: hidden;
	text-align: left;
	width: 1000px;
}
#workspace[id] {
	width: 998px;
}

#primary-workspace {	/* 998px wide */
	background-color: #FFFFFF;
	float: left;
	padding: 20px;
	width: 998px;
}
#primary-workspace[id] {
	width: 958px;
}

#workspace.dual-workspace #primary-workspace {
	width: 798px;
}
#workspace.dual-workspace[id] #primary-workspace {
	width: 758px;
}


/* General elements */
pre.code {
	background: #F6F6F6;
	border: #CCCCCC 1px dotted;
	color: #000066;
	padding: 0.5em;
}


/*
# Workspace header
# <div class="head">
#		<h1>[heading]</h1>
#		<h2>[optional subheading]</h2>
#		<ul>
#			<li class="first-child"></li>
#			...
#		</ul>
# </div>
*/
div.head {
	border-bottom: 1px dotted #666666;
	margin-bottom: 1em;
	height: 1px;
	padding-bottom: 10px;
	vertical-align: bottom;
}
div.head[class] {
	height: auto;
	overflow: hidden;
}

	div.head h1 {
		color: #666666;
		display: inline;
		font-size: 2em;
		font-weight: normal;
		margin: 0px;
		zoom: 1;
		text-shadow: #CCCCCC 1px 1px 1px;
	}

	div.head h2 {
		color: #AAAAAA;
		display: inline;
		font-size: 1.5em;
		font-weight: normal;
		margin: 0px;
		padding-left: 0.5em;
		zoom: 1;
	}

	div.head /**/> h1, div.head /**/> h2 {
		display: inline-block;
	}

	div.head ul {
		float: right;
		margin-top: 2px;
	}

		div.head ul li {
			border-left: #CCCCCC 1px solid;
			float: left;
			padding: 3px 8px;
		}

		div.head ul li:first-child, div.head ul li.first-child {
			border: none;
		}

			div.head ul li a {
				font-size: 11px;
				font-weight: bold;
			}

/*
# Standard content panel
# <div class="std">
#		<h3>[panel heading]</h3>
#		<dl [class="required"]>
#			<dt>[form field title]</dt>
#			<dt class="aid">[form field aiding test]</dt>
#			<dd>
#			</dd>
#		</dl>
#		...
# </div>
#
# You can also turn a standard content panel into a tabbed-UI. See the "tabbed
# panel" section below.
*/
div.std {
}

	.std h3 {
		background: #2083bd;
		color: #FFFFFF;
		display: block;
		font-size: 13px;
		padding: 10px;
	}

	.std dl {
		background: #F0F0F0;
		height: 1px;
		margin: 20px 0px;
	}
	.std[class] dl {
		height: auto;
		overflow: hidden;
	}

		.std dl dt {
			float: left;
			margin: 5px 0px;
			padding: 0px 5px;
		}

		.std dl dt.aid {
			color: #999999;
			float: right;
			font-style: italic;
			margin-left: 15px;
		}

		.std dl dd {
			background: #FFFFFF;
			clear: both;
			margin: 0px;
			padding: 5px 0px 1px 0px;	/* Collapse margins */
		}

			.std dl.required dd input,
			.std dl.required dd select {
				background-color: #FFFFDD;
			}

/*
# Two-column standard panel
#	<div class="std-2col">
#		<div class="col-left">...</div>
#		<div class="col-right">...</div>
#	</div>
*/
.std-2col {
	height: 1px;
}
.std-2col[class] {
	height: auto;
	overflow: hidden;
}

	.std-2col .col-left {
		float: left;
		width: 49%;
	}

	.std-2col .col-right {
		float: right;
		width: 49%;
	}

/*
# Standard tabbed panel. Wrap "std" panels within this block to make them
# tabbed. The <h3> tag is used for the tab title:
#	<div class="std-tabbed">
#		<div class="std">
#			<h3>Tab title goes here (required)</h3>
#			<div class="lead">...optional Lead content goes here...</lead>
#		</div>
#		<div class="std">...</div>
#		...
#	</div>
*/
.std-tabbed {
}

	ol.tabs {
		border-bottom: #124b6d 1px solid;
		margin: 0px;
		padding: 0px;
	}

		ol.tabs li {
			display: inline;
			list-style-type: none;
			margin: 0px 5px 0px 0px;
			zoom: 1;
		}
		ol.tabs[class] >/**/li {
			display: inline-block;
		}

			ol.tabs a {
				background: #2083bd;
				color: #FFFFFF;
				display: block;
				padding: 1em;
			}

			ol.tabs a.active {
				background: #124b6d;
				text-shadow: #000 1px 1px 1px;
			}

	.std-tabbed .std {
		display: none;
	}

	.std-tabbed .std .lead {
		background: #dceffa;
		border-bottom: #34a2e2 1px dotted;
		padding: 10px;
	}

/*
# List table
# <table class="list">
#		<thead><tr><th>...</th></tr></thead>
#		<tfoot><tr><td>...</td></tr></tfoot>
#		<tbody>...</tbody>
#	</table>
*/
table.list {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

	table.list caption {
		background: #F4F4F4;
		padding: 5px 10px;
		text-align: left;
	}

	table.list tr {
	}

	table.list th {
		background: #D0D0D0;
		color: #666666;
		padding: 5px 10px;
	}

	table.list td {
		border-bottom: #CCCCCC 1px solid;
		padding: 10px 10px;
	}


/* Inputs, buttons */
input[type=text], input[type=password], select, textarea {
	border: 1px #CCCCCC solid;
	border-top-color: #999999;
	border-left-color: #999999;
}

.tiny {
	width: 50px;
}

.small {
	width: 100px;
}

.medium {
	width: 250px;
}

textarea.medium {
	height: 125px;
}

.large {
	width: 500px;
}

textarea.large {
	height: 300px;
}

.fullwidth {
	width: 98%;
}

button {
	background: #e6e6e6 no-repeat 4px center;
	border: #999 1px solid;
	margin: 2px 0px;
	padding: 4px 8px 4px 20px;
	-moz-border-radius: 5px;
	text-align: left;
}

button.apply {
	background-image: url('../../images/icons/accept.png');
}

button.browse {
	background-image: url('../../images/icons/find.png');
}

button.delete {
	background-image: url('../../images/icons/bin.png');
}

button.reset {
	background-image: url('../../images/icons/arrow_redo.png');
}

button.submit {
	background-image: url('../../images/icons/bullet_go.png');
}

button.add {
	background-image: url('../../images/icons/add.png');
}


/* ------------------------------------------------------ Secondary workspace */
#secondary-workspace {	/* 200px wide */
	background: #dceffa url('../../images/secondary-workspace-bg.gif') repeat-y;
	border-left: #34a2e2 1px dotted;
	float: right;
	padding-bottom: 2000px;
	margin-bottom: -2000px;
	width: 200px;
}
#secondary-workspace[id] {
	width: 199px;
}

	#slot-secondary {	/* 180px wide */
		margin: 10px 10px 10px 9px;
	}

		#slot-secondary h3 {
			background: #c4e3f7;
			border-bottom: #91caf0 1px solid;
			font-size: 1.15em;
			margin: 1em 0px;
			padding: 0.5em;
		}

		#slot-secondary div.hr {
			border-top: #2083bd 1px dotted;
			height: 1px;
			margin: 9px 0px 10px 0px;
		}

			#slot-secondary div.hr hr {
				visibility: hidden;
			}

		#slot-secondary dl {
			margin: 1em 0px;
		}

			#slot-secondary dt {
				font-weight: bold;
				margin-bottom: 0.5em;
			}

			#slot-secondary dd {
				margin: 0px;
			}

		#slot-secondary a.task {
			background: #fff no-repeat 5px center;
			border: #ccc 1px solid;
			display: block;
			font-size: 16px;
			font-weight: bold;
			margin: 2px 0px;
			padding: 8px 8px 8px 30px;
		}

		#slot-secondary a.task-create {
			background-image: url('../../images/icons/add.png');
		}


/* ------------------------------------------------------------------- Footer */
#wrap-footer {
}

#footer {
	margin: 0px auto;
	width: 1000px;
}

	#footer p {
		color: #CCCCCC;
		margin: 0px;
		padding: 1em 0px;
		text-align: right;
	}

		#footer p a {
			color: #CCCCCC;
			font-weight: bold;
		}


/* ------------------------------------------------------------ Autocompleter */
.ac_results ul {
	border: #ccc 2px solid;
	margin: 0px;
	padding: 0px;
}

	.ac_results ul li {
		list-style-type: none;
		margin: 0px;
		padding: 5px 7px;
		text-align: left;
	}

	.ac_results ul li.ac_even {
		background: #fff;
	}

	.ac_results ul li.ac_odd {
		background: #eee;
	}

	.ac_results ul li.ac_over {
		background: #efe;
		text-shadow: #aaa 1px 1px 1px;
	}


/* ------------------------------------------------------------ Popup styling */
body.popup {
}

	.popup #workspace {
		border: none;
		width: auto;
	}

		.popup #primary-workspace {
			padding: 0px;
			width: 100%;
		}

		.popup #workspace.dual-workspace #primary-workspace {
			width: 75%;
		}

		.popup #workspace #secondary-workspace {
			width: 24%;
		}